<template>
    <!--免费直播overview-->
    <div class="free-live-contain">
        <ul class="live-intro-list">
            <li class="live-intro" v-for="live in liveList" :key="live.id">
                <div class="intro-back">
                    <img src="//cxxf.caixinedu.cn/1602218240827cfc9f867dd9141143365a9acf8793fd.jpg" alt="" />
                </div>
                <div class="intro-msg">
                    <div class="live-status">
                        <span v-show="live.playStatus === 1" class="playing">
                            <i class="icon-playing"></i>
                            正在直播
                        </span>
                        <span v-show="live.playStatus === 0" class="waiting">
                            直播时间：
                            <span>
                                {{ $util.dateConverter('MM月dd日 hh:mm',live.live_bg_time) }}
                            </span>
                        </span>
                        <span v-show="live.playStatus === 2 " class="reback">
                            已回放
                        </span>
                        <span v-show="live.playStatus === -1 " class="ended">
                            直播结束
                        </span>
                    </div>
                    <div class="live-title">{{ live.live_name }}</div>
                    <div class="live-btn">
                        <span v-if="live.playStatus === 1 || (live.playStatus === -1&& live.is_kt_record==1)" class="live-door"
                              @click="handleOpenLiveDetail(live)"
                            >进入
                        </span>
                        <span
                            v-if="live.playStatus === 0 && live.ifyy === '未预约'"
                            class="live-order"
                            @click="ajaxOrderLive(live.id)"
                            >预约
                        </span>
                        <span v-if="live.playStatus === 0 && live.ifyy === '已预约'" class="live-ordered">
                            已预约
                        </span>
                    </div>
                </div>
                <div class="intro-base">
                    <div class="intro-author">
                        <i v-show="live.teacherHead">
                            <img :src="live.teacherHead" alt="" />
                        </i>
                        <span>{{ live.teacher_name }}</span>
                    </div>
                    <div class="focus-num" v-if="live.playStatus === 1">
                        <i></i>
                        <span>{{ live.watchedNum || 0}}人正在观看</span>
                    </div>
                    <div class="focus-num" v-if="live.playStatus === 0">
                        <i></i>
                        <span>{{ live.watchedNum || 0}}人已预约</span>
                    </div>
                    <div class="focus-num" v-if="live.playStatus === -1">
                        <i></i>
                        <span>{{ live.watchedNum || 0}}人看过</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'freeLiveOverview',
    components: {
        /**/
    },
    data() {
        return {
            account: '',
            liveList: []
        };
    },
    watch: {
        /**/
    },
    mounted() {
        this.initFreeLive();
    },
    methods: {
        initFreeLive() {
            this.ajaxGetFreeLive().then(res => {
                let list =  res.obj.slice(0,4);
                let nowTime = new Date().getTime();
                let tempList = [];
                list.forEach(item=> {
                    let temp = Object.assign({
                        ifyy: item.ifyy
                    },item.v_f_l);
                    let bt = new Date(temp.live_bg_time).getTime();
                    // let et = new Date(temp.live_ed_time).getTime();
                    let livstatus = item.v_f_l.status
                    if(livstatus == 2 ){
                        if(nowTime < bt){
                            // 未开始
                            temp.playStatus = 0;
                        }
                        else{
                            // 直播中
                            temp.playStatus = 1;
                        }
                    }
                    else if ((livstatus ==3 || livstatus == 5) && item.v_f_l.if_has_record == 1){
                        //已回放
                        temp.playStatus = 2;
                    }
                    else if (livstatus == 3 && item.v_f_l.if_has_record != 1){
                        //已结束
                        temp.playStatus = -1;
                    }

                    // if (nowTime < bt ) {
                    //     // 未开始
                    //     temp.playStatus = 0;
                    // } else if(bt <= nowTime && nowTime <=et || !et) {
                    //     // 直播中
                    //     temp.playStatus = 1;
                    // } else {
                    //     // 直播结束
                    //     temp.playStatus = -1;
                    // }
                    tempList.push(temp);
                });
                this.liveList = tempList;
            });
        },
        ajaxGetFreeLive() {
            let option = {
                pathName: 'doGetFreeLive',
                authorization: true
            };
            return this.$api.ajaxData(option);
        },
        handleOpenLiveDetail(video) {
            let routeData = this.$router.resolve({ name: 'live', query: {  id: video.channelid,type:1 } });
            window.open(routeData.href, '_blank');
        },
        // 预约
        ajaxOrderLive(id) {
            if(!this.$util.authLogin()) {
                return
            }
            let option = {
                pathName: 'doLiveYuYue',
                params:{
                    'live_id': id,
                    'st_id': this.$api.getAccount().id
                },
                authorization: true
            };
            this.$api.ajaxData(option)
                .then( res => {
                    if(res.code === 200) {
                        this.$util.alert('预约成功');
                        this.initFreeLive();
                    } else {
                        this.$util.alert(res.msg);
                    }
                });
        },
    }
};
</script>
<style scoped lang="scss">
.free-live-contain {
    .live-intro-list {
        display: flex;
        margin: 0;
        .live-intro {
            position: relative;
            flex: 1 1 25%;
            box-sizing: border-box;
            .intro-back {
                position: relative;
                padding-top: 54%;
                border-radius: 5px;
                img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                }
            }
            .intro-msg {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 30px;
                border-radius: 5px;
                color: #fff;
                background: rgba(51, 51, 51, 0.6);
                overflow: hidden;
                .live-status {
                    float: left;
                    height: 30px;
                    line-height: 28px;
                    padding: 0 10px;
                    font-size: 13px;
                    //border-top-left-radius: 5px;
                    color: #CCCCCC;
                    background: #f2f2f2;
                    box-sizing: border-box;
                    span {
                        display: inline-block;
                        vertical-align: middle;
                        font-weight: bold;
                    }
                    .wait {
                        span {
                            font-weight: inherit;
                        }
                    }
                    .playing {
                        color: #20be27;
                    }
                    .ended {
                        //color: #f2f2f2;
                    }
                    .reback {
                        color: #ffba00;
                    }
                    .icon-playing {
                        display: inline-block;
                        width: 31px;
                        height: 17px;
                        margin: -4px 8px 0 0;
                        vertical-align: middle;
                        background: url(../../assets/image/gif/icon-playing.gif) no-repeat;
                        background-size: cover;
                    }
                }
                .live-title {
                    position: absolute;
                    top: 50%;
                    line-height: 32px;
                    width: 100%;
                    font-size: 24px;
                    font-weight: bold;
                    text-align: center;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    transform: translate(0, -50%);
                }
                .live-btn {
                    position: absolute;
                    left: 50%;
                    top: 75%;
                    width: 94px;
                    height: 20px;
                    margin-left: -47px;
                    margin-top: -5px;
                    line-height: 20px;
                    text-align: center;
                    border-radius: 10px;
                    font-size: 13px;
                    color: rgb(0, 106, 222);
                    font-weight: bold;
                    cursor: pointer;
                    span {
                        display: block;
                        border-radius: 10px;
                        background: #fff;
                    }
                    .live-ordered {
                        color: #fff;
                        background: rgb(0, 106, 222);
                    }
                }
                .live-btn:hover {
                    opacity: 0.7;
                }
            }
            .intro-base {
                display: flex;
                height: 30px;
                font-size: 13px;
                align-items: flex-end;
                justify-content: space-between;
                .intro-author {
                    display: flex;
                    padding: 0 8px;
                    color: rgb(153, 153, 153);
                    flex-shrink: 0;
                    align-items: center;
                    i {
                        display: block;
                        flex-shrink: 0;
                        height: 35px;
                        width: 35px;
                        margin-right: 8px;
                        border-radius: 50%;
                        background: rgb(204, 204, 204);
                        img {
                            width: 100%;
                            height: 100%;
                            border: none;
                            background: none;
                            border-radius: 50%;
                            margin: 0;
                            padding: 0;
                        }
                    }
                }
                .focus-num {
                    display: flex;
                    align-items: center;
                    color: rgb(204, 204, 204);
                    i {
                        display: block;
                        width: 15px;
                        height: 17px;
                        margin: 0 8px;
                        background: url(../../assets/image/icons/hot.png)
                            no-repeat;
                        background-size: contain;
                    }
                }
            }
        }
        .live-intro:not(:last-child) {
            margin-right: 30px;
        }
    }
}
</style>
